
Vue.component('upload-com',{
	template:`
	<div>
	<!--拖动选择层-->
	    <div id="pictureUpload" ref="pictureUpload">
	        <div id="pictureUpload-bg" ref='pictureUpload-bg'
	        	v-bind:style="{transform:scaleValue,left:imageData.move.x+'px',
	        	top:imageData.move.y+'px',backgroundImage:bgImage
	        	}"
	        	></div>
	        <div id="pictureUpload-mask" ref="pictureUploadMask"
	        :style="{width:canvas.width,height:canvas.height}"></div>
	    </div>
	    
	    <!--操作按钮-->
	    <div id="button">
	        <div id="select" class="active" @click='selectImage'>选择</div>
	        <div id="preview" :class="{active:btnIsActive}" @click='createImg'>预览</div>
	        <div id="submit" :class="{active:btnIsActive}">上传</div>
	        <div id="createLocalImg" :class="{active:btnIsActive}">生成</div>
	    </div>
	    
	    <!--文件域-->
	    <input type="file" ref="fileElem" @change='imageChange' id="fileElem" multiple accept="image/*" style="display:none">

	    <!--用于生成和预览-->
	    <div id="canvasWrap">
	    	<canvas id="canvas" ref="canvas" :style="{width:canvas.width,height:canvas.width}"></canvas>
	    </div>
	</div>
	`,
	data(){
		return {
//			imageData:{
//				scale:1,
//				left:'0',
//				top:'0',
//				imgObjectURL:'',
//			},
			imageData:{
				//图像的尺寸
	            origin: {
	                width: 0,
	                height: 0
	            },
	            //缩放比例 默认为1
	            scale: 1,
	            //偏移量
	            move: {
	                x: 0,
	                y: 0
	            },
	            //临时缩放比例
	            tempScale: 0,
	            //临时缩放偏移量,用于用户操作相关的计算
	            tempMove: {
	                x: 0,
	                y: 0
	            },
	            imgObjectURL:'',
			},//图片的初始数据
			btnIsActive:false,
			canvas:{
				width:180,
				height:180
			}
		}
	},
	computed:{
		scaleValue(){
			return `scale(${this.imageData.scale},${this.imageData.scale})`;
		},
		bgImage(){
			return `url("${this.imageData.imgObjectURL}")`;
		},
	},
	methods:{
		selectImage:function(){
			$(this.$refs.fileElem).click();
		},
		//初始化图片的初始数据
		initImageData(){
			this.imageData={
				//图像的尺寸
	            origin: {
	                width: 0,
	                height: 0
	            },
	            //缩放比例 默认为1
	            scale: 1,
	            //偏移量
	            move: {
	                x: 0,
	                y: 0
	            },
	            //临时缩放比例
	            tempScale: 0,
	            //临时缩放偏移量,用于用户操作相关的计算
	            tempMove: {
	                x: 0,
	                y: 0
	            },
	            imgObjectURL:'',
			}
		},
		//图片改变事件
		imageChange:function(){
			console.log(1);
			if($(this.$refs.fileElem)[0].files.length==0){
				return
			};
			let file=$(this.$refs.fileElem)[0].files[0];
			this.btnIsActive=true;
			this.initImageData();
			if(this.imageData.imgObjectURL){
				//释放图片资源
				window.URL.revokeObjectURL(this.imageData.imgObjectURL)
			}
			this.imageData.imgObjectURL=window.URL.createObjectURL(file);
			let img=new Image();
			img.src=this.imageData.imgObjectURL;
			//保存图片原始大小
			let data=this;
			img.onload=function(){
				data.imageData.origin.width=img.width;
				data.imageData.origin.height=img.height;
			}
			
			
		},
		createImg(){
			this.$refs.canvas.width=this.canvas.width;
			this.$refs.canvas.height=this.canvas.height;
	        let context = this.$refs.canvas.getContext("2d");
	        let img = new Image();
	        img.src = this.imageData.imgObjectURL
	        //img.onload = function () {
	            //在画布上放置图像的 x 坐标位置。
	            var offsetx;
	            //在画布上放置图像的 y 坐标位置。
	            var offsety;
	            //要使用的图像的宽度。（伸展或缩小图像）
	            var biliW = $(this.$refs.pictureUpload)[0].clientWidth;
	            //要使用的图像的高度。（伸展或缩小图像）
	            var biliH = $(this.$refs.pictureUpload)[0].clientHeight;
	
	            if (this.imageData.origin.width >= this.imageData.origin.height) {
	                biliH = biliH / this.imageData.origin.width * this.imageData.origin.height
	            } else if (this.imageData.origin.width < this.imageData.origin.height) {
	                biliW = biliW / this.imageData.origin.height * this.imageData.origin.width
	            }
	            offsetx = (this.$refs.canvas.width - biliW * this.imageData.scale) / 2 + this.imageData.move.x;
	            offsety = (this.$refs.canvas.height - biliH * this.imageData.scale) / 2 + this.imageData.move.y;
				context.drawImage(img, 0, 0, img.width, img.height, offsetx, offsety, biliW * this.imageData.scale, biliH * this.imageData.scale);
	
	        //}
		}
	},
	mounted:function(){
		console.log(this.$refs);
		let mc=new Hammer(this.$refs.pictureUpload);
		mc.add([new Hammer.Pan(),new Hammer.Pinch()]);
		let data=this;
		mc.on('pinchstart',function(ev){
			data.imageData.tempScale=ev.scale;
			
		});
		mc.on('pinchmove',function(ev){
			data.imageData.scale=ev.scale-data.imageData.tempScale+data.imageData.scale;
			data.imageData.tempScale=ev.scale;
			
		});
		mc.on('panstart',function(ev){
			data.imageData.tempMove.x = ev.center.x;
        	data.imageData.tempMove.y = ev.center.y;
        	console.log(data.imageData.tempMove.x ,data.imageData.tempMove.y)
		});
		mc.on('panmove',function(ev){
			let px=ev.center.x-data.imageData.tempMove.x;
			let py=ev.center.y-data.imageData.tempMove.y;
			data.imageData.move.x=data.imageData.move.x+px;
			data.imageData.move.y=data.imageData.move.y+py;
			data.imageData.tempMove.x=ev.center.x;
			data.imageData.tempMove.y=ev.center.y;
			console.log(data.imageData.move.x,data.imageData.move.y)
		})
	},
})
var app=new Vue({
	el:'#app',
	data:{
		title:'上传头像demo',
		
	}
})